<template>
  <div class="dashboard">
    <router-view></router-view>
    <div class="dashboard_empty" v-if="!questionList.length">
      <div>
        <img style="height: 432px" src="~@/assets/empty_background_image.png" class="empty_background_image" alt="empty_background_image">
      </div>
      Your dashboard is empty<br/>
      You can create an ideation session by tapping the<br/>
      plus button.
    </div>
    <div v-else style="overflow:auto; padding: 20px 36px;">
      <div class="question-title">
        Recent ideations
      </div>
      <div class="question-card" v-for="item in questionList" :key="item.id">
         <a-avatar
           size="large"
            v-if="item.anonymous && item.avatar"
            slot="avatar"
            :src="item.avatar"
          />
        <div class="content">
          <div class="title">{{ item.name }}</div>
          <div class="status-box font-roboto-regular">
            <div :class="['released-time', item.running_status === 'not_started' ? 'no-started' : '']">
              {{ item.running_status }} - release on {{ item.release_time }}</div>
            <div class="start-time">Started on {{ item.start_time }}</div>
          </div>
        </div>
        <div class="question-btn">
          <a-tooltip v-if="item.running_status === 'in_progress'" placement="right">
            <template #title>
              This ideation is already in progress status which cannot be edited
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
          <a-popover v-if="item.running_status !== 'in_progress' && (getAnswerAuth(item) || getEditAuth(item))" v-model="item.visible" trigger="click" overlayClassName="toolbox" placement="right">
            <template #content>
              <div class="toolbox">
                <div v-if="getAnswerAuth(item)" @click="handleAnswer(item)">
                  <a-icon type="message" />
                  <span>Answer</span>
                </div>
                <div v-if="getEditAuth(item)" @click="handleEdit(item)">
                  <a-icon type="edit" />
                  <span>Edit</span>
                </div>
                <div v-if="getEditAuth(item)" @click="handleDelete(item)">
                 <a-icon type="close-circle" />
                 <span>Delete</span>
                </div>
              </div>
            </template>
            <svg
              t="1650813341490"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2786"
              width="16"
              height="16"><path d="M512 298.6496a85.3504 85.3504 0 1 0 0-170.6496 85.3504 85.3504 0 0 0 0 170.6496z" p-id="2787" fill="#8a8a8a"></path><path d="M512 512m-85.3504 0a85.3504 85.3504 0 1 0 170.7008 0 85.3504 85.3504 0 1 0-170.7008 0Z" p-id="2788" fill="#8a8a8a"></path><path d="M512 896a85.3504 85.3504 0 1 0 0-170.7008 85.3504 85.3504 0 0 0 0 170.7008z" p-id="2789" fill="#8a8a8a"></path></svg>
          </a-popover>
          <a-tooltip v-if="item.running_status !== 'in_progress' && !getAnswerAuth(item) && !getEditAuth(item)" placement="right">
            <template #title>
              This ideation cannot be edited
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ideaDashboard } from '@/api/api'
import moment from "moment";
import { Modal } from 'ant-design-vue'

moment.locale('en')
export default {
  data () {
    return {
      questionList: [

      ],
    }
  },
  computed: {
    routeName () {
      return this.$route['name']
    }
  },
  watch: {
    routeName: {
      handler () {
        this.getList()
      },
        immediate: true
    }
  },
  methods: {
    getList () {
      if (this.$route.name !== 'Dashboard') return
      this.questionList = []
      ideaDashboard.list().then(res => {
        this.questionList = res.idea_definitions.map(el => {
          return {
            ...el,
              release_time: moment(el.release_time).format('MMM DD, YYYY, hh:mm A'),
              start_time: moment(el.start_time).format('MMM DD, YYYY, hh:mm A'),
              avatar: el.anonymous ? '' : '',
              visible: false,
          }
        })
      })
    },
    handleAnswer (item) {
      item.visible = false
      this.$router.push({ path: '/Dashboard/answer', query: { id: item.idea_id } })
    },
    handleEdit (item) {
      item.visible = false
      this.$router.push({ path: '/Dashboard/edit', query: { id: item.id } })
    },
    handleDelete (item) {
      item.visible = false
      const that = this
      Modal.confirm({
        title: () => 'Are you sure?',
        content: () => 'This ideation is going to be deleted permanently.',
        okText: 'Yes, delete it',
        cancelText: 'No, keep it',
        onOk () {
          ideaDashboard.delete(item.id).then(res => {
            that.getList()
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
      
    },
    // 
    getAnswerAuth(item) {
      return item.running_status !== 'not_started' && item.invited_participants.find(el => el.ref_user_id === this.$store.getters.userInfo.ref_user_id)
    },
    getEditAuth(item) {
      return item.running_status === 'not_started' && item.user_id === this.$store.getters.userInfo.id
    },
  }
}
</script>
<style lang="less">
.toolbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  > div {
    color: #5E6366;
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    span {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}

.dashboard {
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
  .dashboard_empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 24px;
    color: #919699;
    line-height: 36px;
  }
}
.question-card {
  min-width: 750px;
  position: relative;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #FFFFFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 12px 0;
  display: flex;
  padding: 24px;
  cursor: pointer;
  overflow: auto;
  .question-btn {
    position: absolute;
    right: 10px;
    top: 20px;
  }
   .ant-avatar {
    margin-right: 40px;
  }
  .title {
    font-size: 20px;
    font-family: Quicksand500;
    font-weight: bold;
    color: #5E6366;
    line-height: 28px;
    margin-bottom: 30px;
  }
  .status-box {
    display: flex;
    .released-time {
      border-radius: 4px 4px 4px 4px;
      background: linear-gradient(90deg, #FEF7DF 0%, #F0DCCB 100%);
      &.no-started {
        background: linear-gradient(90deg, #FFF3F3 0%, #EBD1FF 100%);
      }
      width: 331px;
      height: 23px;
      text-align: center;
      line-height: 23px;
      font-size: 14px;
      font-weight: 400;
      color: #3E4345;
      margin-right: 30px;
      font-family: inherit !important;
    }
    .start-time {
      font-size: 14px;
      font-weight: 400;
      color: #3E4345;
      font-family: inherit !important;
    }
  }
}
</style>
